<template>
  <div class="detailContainer">
    <!-- 顶部导航栏 -->
    <detail-nav-bar @itemClick="itemClick" ref="navBar"/>

    <!-- 滚动组件 -->
    <scroll class="wrapper" ref="scroll" @scroll="scrollPosition">
<!--      <div>{{$store}}</div>-->
      <!-- 轮播图 -->
      <detail-swiper :top-image="topImage"/>

      <!-- 商品信息 -->
      <detail-base-info :goods="goods"/>

      <!-- 店家信息 -->
      <detail-shop-info :shop="shop"/>

      <!-- 详情图片 -->
      <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"/>

      <!-- 商品参数信息 -->
      <detail-param-info ref="params" :param-info="paramInfo"/>

      <!-- 评论组件 -->
      <detail-comment ref="comment" :comment-info="commentInfo"/>

      <!-- 推荐商品数据 -->
      <goods-list ref="recommend" :good-list="goodList" />
    </scroll>

    <detail-bottom-bar @addCart="addCart"/>

    <back-top @click.native="backTop" v-show="isShowBackTop"/>
    <toast/>
  </div>
</template>

<script>
  import DetailNavBar from "./childComps/DetailNavBar";
  import DetailSwiper from "./childComps/DetailSwiper";
  import DetailBaseInfo from "./childComps/DetailBaseInfo";
  import DetailShopInfo from "./childComps/DetailShopInfo";
  import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
  import DetailParamInfo from "./childComps/DetailParamInfo";
  import DetailComment from "./childComps/DetailComment";
  import DetailBottomBar from "./childComps/DetailBottomBar";
  import Scroll from "components/common/scroll/Scroll";
  import GoodsList from "components/content/goods/Goods"
  import Toast from "components/common/toast/Toast";
  import BackTop from "components/common/backTop/BackTop";

  import {itemImgLoad} from '@/bus/busName';
  import {debounce} from "common/utils";
  import {ADD_CART} from "../../store/actions_type";
  import {mapActions} from "vuex";
  import {detail, recommend, Goods, Shop, GoodsParam} from "network/detail.js";

  export default {
    name: "Detail",
    components: {
      Scroll,
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      DetailGoodsInfo,
      DetailParamInfo,
      DetailComment,
      GoodsList,
      DetailBottomBar,
      BackTop,
      Toast
    },
    data() {
      return {
        iid: null,
        topImage: [],
        goods: {},
        shop: {},
        detailInfo: {},
        paramInfo: {},
        commentInfo: {},
        goodList: [],
        itemImgHandle: null,
        changeOffSetTop: [0], // 商品、参数、评论、推荐需要滚动到顶部的距离
        isShowBackTop: false,  // 是否显示滚动到顶部箭头
      }
    },
    created() {
      this.iid = this.$route.params.iid;

      // 获取详情数据
      this.getDetail();

      // 获取推荐商品数据
      this.getRecommend()

      // 此事件在keep-alive中需要销毁
      this.itemImgHandle = () => {
        // 每一张图片更新完成，都调用一下此方法，让scroll重新计算高度
        debounce(this.$refs.scroll.refresh);  // 图片加载完成事件监听，防抖
      };
      this.$bus.$on(itemImgLoad, this.itemImgHandle);

    },

    methods: {
      ...mapActions({
        addCartProduct: ADD_CART
      }),

      // 添加购物车
      addCart(){
        const product = {}
        product.image = this.topImage[0];
        product.title = this.goods.title;
        product.desc = this.goods.desc;
        product.price = this.goods.realPrice;
        product.iid = this.iid;
        // this.$store.dispatch(ADD_CART, product).then(value => {
        //   console.log(value)
        // })
        this.addCartProduct(product).then(value => {
          this.$toast.show(value)
        })
      },

      // 点击顶部导航栏，切换
      itemClick(index){
        this.$refs.scroll.scrollTo(0, -this.changeOffSetTop[index])
      },

      // 获取详情数据
      getDetail() {
        detail(this.iid)
          .then(value => {
            const {result} = value;
            this.topImage = result.itemInfo.topImages;
            this.goods = new Goods(result.itemInfo, result.columns, result.shopInfo.services)
            this.shop = new Shop(result.shopInfo);
            this.detailInfo = result.detailInfo;
            this.paramInfo = new GoodsParam(result.itemParams.info, result.itemParams.rule)
            this.commentInfo = result.rate.cRate > 0 ? result.rate.list[0] : {}

            // 当获取到值传给子组件后，等待子组件渲染完，获取子组件距离顶部高度
            this.$nextTick(()=>{
              this.changeOffY()
            })
          })
      },

      changeOffY(){
        this.changeOffSetTop = [];
        this.changeOffSetTop.push(0);
        this.changeOffSetTop.push(this.$refs.params.$el.offsetTop)
        this.changeOffSetTop.push(this.$refs.comment.$el.offsetTop)
        this.changeOffSetTop.push(this.$refs.recommend.$el.offsetTop)
      },

      // 通知scroll组件在图片加载完毕之后刷新
      imageLoad(){
        this.$refs.scroll.refresh()
        this.changeOffY()
      },

      // 获取推荐商品数据
      getRecommend(){
        recommend()
          .then(value => {
            this.goodList = value.data.list
          })
      },

      // 获取scroll组件滚动位置，切换顶部导航栏item
      scrollPosition(position){

        const y = -position.y;

        // 判断向上箭头是否显示
        this.isShowBackTop = y > 500

        if (y >= this.changeOffSetTop[0] && y<this.changeOffSetTop[1]){
          this.$refs.navBar.currentIndex = 0;

        } else if (y >= this.changeOffSetTop[1] && y<this.changeOffSetTop[2]){
          this.$refs.navBar.currentIndex = 1;

        } else if (y >= this.changeOffSetTop[2] && y<this.changeOffSetTop[3]){
          this.$refs.navBar.currentIndex = 2;

        }else if (y >= this.changeOffSetTop[3]){
          this.$refs.navBar.currentIndex = 3;
        }
      },

      // 滚动到顶部
      backTop(){
        this.$refs.scroll.scrollTo(0, 0, 1000)
      },

    },
    destroyed(){
      this.$bus.$off(itemImgLoad, this.itemImgHandle)
    }
  }
</script>

<style scoped>
  .detailContainer{
    position: relative;
    height: 100vh;
  }
  .wrapper {
    position: absolute;
    top: 44px;
    bottom: 50px;
    left: 0;
    right: 0;
  }
</style>
